<template>
  <view class="mine-courses-container">
    <view class="course-container">
      <image class="cover" src="http://down.qwdata.vip/app_icon/1684345052646" mode="aspectFit"></image>
      <view class="info">
        <view class="title">【西西教练】科目 1234 驾考课程（电子版资料无需快递）</view>
        <view class="f1"></view>
        <view class="footer">
          <view class="valid">永久有效</view>
          <view class="f1"></view>
          <view class="start-btn">开始学习</view>
        </view>
      </view>
    </view>
    <view class="course-container">
      <image class="cover" src="http://down.qwdata.vip/app_icon/1684345052646" mode="aspectFit"></image>
      <view class="info">
        <view class="title">【西西教练】科目 1234 驾考课程（电子版资料无需快递）</view>
        <view class="f1"></view>
        <view class="footer">
          <view class="valid">永久有效</view>
          <view class="f1"></view>
          <view class="start-btn">开始学习</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.mine-courses-container {
  padding: 1px;
  .course-container {
    margin: 30rpx;
    background-color: #fff;
    width: 630rpx;
    height: 190rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    padding-bottom: 46rpx;
    display: flex;

    .cover {
      margin-right: 20rpx;
      width: 232rpx;
      height: 180rpx;
      background-color: #ccc;
      border-radius: 16rpx;
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;

      .title {
        color: #121212;
        font-size: 15px;
        font-weight: bold;
      }

      .footer {
        display: flex;
        align-items: center;

        .valid {
          color: #E04411;
          font-size: 12px;
        }

        .start-btn {
          background-color: #3073F6;
          height: 60rpx;
          width: 166rpx;
          border-radius: 32rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 13px;
        }
      }
    }
  }
}
</style>